<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 必须的 meta 标签 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>GameHub商城</title>
  <!-- Bootstrap 的 CSS 文件 -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/font/stylesheet.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" >
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/global.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/success.min.css">
  <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js" ></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap.bundle.js"></script>
  <script>
    function change(obj){
      var $span = $(obj)
      var $price = $span.closest("li").find(".price")
      var $ul = $span.closest("ul")
      var $block = $ul.find(".d-block")
      
      if($(obj).hasClass("check")){
        // var $check = $ul.find(".check")
        // $span.removeClass("check")
        // $span.addClass("uncheck")
        // $span.html('<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-square" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/></svg>')
      }else if($(obj).hasClass("uncheck")) {
        var $check = $ul.find(".check")
        $block.removeClass("d-block")
        $price.addClass("d-block")
        $check.removeClass("check")
        $check.addClass("uncheck")
        $span.removeClass("uncheck")
        $span.addClass("check")
        $check.html('<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-square" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/></svg>')
        $span.html('<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" class="bi bi-check2-square" viewBox="0 0 16 16"><path d="M3 14.5A1.5 1.5 0 0 1 1.5 13V3A1.5 1.5 0 0 1 3 1.5h8a.5.5 0 0 1 0 1H3a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V8a.5.5 0 0 1 1 0v5a1.5 1.5 0 0 1-1.5 1.5H3z"/><path d="m8.354 10.354 7-7a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z"/></svg>')
      }
    }
      function payorder(){
    	  var $ul = $("#paylist")
    	  var $paymethod = $ul.find(".check").attr("data-payId")
    	  String = "${pageContext.request.contextPath}/pay/payOrder?method="+$paymethod+"&orderNumber=${order.order_number}&sum=${order.final_price}";
    	  alert(String);
    	  window.location.href = String
      }
  </script>
</head>
<body>
  <!-- 头部导航标签 -->
  <nav class="navbar navbar-expand-lg ">
    <a class="navbar-brand" href="#"><img src="../img/logo.png" alt="" height="40px" class="d-inline-block align-top"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText1" aria-controls="navbarText1" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText1">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">商城 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">榜单</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">帮助</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">常见问题</a>
        </li>
      </ul>
          <a href="${pageContext.request.contextPath}/pages/regest.jsp" class="navbar-text">注册</a>
          <c:if test="${not empty user}">
            <a href="${pageContext.request.contextPath}/user/exit" class="navbar-text">退出账户</a>
          </c:if>
          <c:if test="${empty user}">
            <a href="${pageContext.request.contextPath}/pages/login.jsp" class="navbar-text">登录</a>
          </c:if>
    </div>
  </nav>
  <!-- 搜索和商城导航栏 -->
  <div class="container mx-auto px-0 mb-2 sticky-top" id="banner-search">
    <div class="row px-0">
      <div class="col-md-1"></div>
      <nav class="col-lg-10 col-md-10 navbar navbar-expand-lg px-0" id="test">
        <a class="navbar-brand" href="#">
          <div class="input-group">
            <div class="input-group-prepend">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
              </svg>
              <!-- <span class="input-group-text" id="basic-addon1">@</span> -->
            </div>
            <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
          </div>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">探索 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">浏览</a>
            </li>
          </ul>
              <c:if test="${not empty user}">
                <span class="navbar-text">欢迎${user.username}</span>
                <a href="${pageContext.request.contextPath}/pages/personal.jsp" class="navbar-text">个人中心</a>
                <a class="navbar-text">愿望清单</a>
                <a href="${pageContext.request.contextPath}/cart/getUserCart" class="navbar-text">购物车<span class="badge badge-light ml-1">4</span></a>
              </c:if>
        </div>
      </nav>
      <div class="col-md-1"></div>
    </div>
  </div>
  <main class="container mx-auto px-0 " >
    <div class="row px-0 ">
      <div class="col-1"></div>
      <!-- 页面主体 -->
      <div class="col-10 p-0 " id="success-page">
        <div class="main-title">GameHub收银台</div>
        <div class="d-flex flex-row justify-content-between">
          <div class="desc">
            <div>订单已成功提交</div>
            <div>订单号 ： <span id="order-number">${order.order_number}</span></div>
          </div>
          <div class="price">
            <div>应付金额<span id="pay-price">${order.final_price}</span>元</div>
            <a class="" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
              订单详情
            </a>
          </div>
        </div>
        <div class="collapse " id="collapseExample">
          <ul class="card card-body bg-transparent detail">
            <li id="address">收货地址：
              <span id="provice">${order.useraddress.province}</span>
              <span id="city">${order.useraddress.city}</span>
              <c:if test="${order.useraddress.area != '选择区' || order.useraddress.area != '选择县'}">
              	<span id="area">${order.useraddress.area}</span>
              </c:if>
              <span id="block">${order.useraddress.town}</span>
              <span id="detail">${order.useraddress.detailAddr}</span></li>
            <li id="items">商品：<span>${order.list[0].game_name}</span></li>
          </ul>
        </div>

        <div class="p-5 card-pay rounded">
          <div class="container py-3 px-5">
            <ul id="paylist">
              <li class="d-flex flex-row justify-content-between align-items-center">
    
                <div class="title">
                  <span class="icon check" onclick="change(this)" data-payId="1">
                    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" class="bi bi-check2-square" viewBox="0 0 16 16">
                      <path d="M3 14.5A1.5 1.5 0 0 1 1.5 13V3A1.5 1.5 0 0 1 3 1.5h8a.5.5 0 0 1 0 1H3a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V8a.5.5 0 0 1 1 0v5a1.5 1.5 0 0 1-1.5 1.5H3z"/>
                      <path d="m8.354 10.354 7-7a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z"/>
                    </svg>
                  </span>
                  支付宝支付
                </div>
                <div class="price d-none d-block">
                  <div>应付金额<span id="pay-price">${order.final_price}</span>元</div>
                </div>
              </li> 
              <li class="d-flex flex-row justify-content-between align-items-center">
                <div class="title">
                  <span class="icon uncheck" onclick="change(this)" data-payId="2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-square" viewBox="0 0 16 16">
                      <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                    </svg>
                  </span>  
                  微信支付
                </div>
                <div class="price d-none">
                  <div>应付金额<span id="pay-price">${order.final_price}</span>元</div>            
                </div>
              </li> 
              <li class="d-flex flex-row justify-content-between align-items-center">
                <div class="title">
                  <span class="icon uncheck" onclick="change(this)" data-payId="3">
                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-square" viewBox="0 0 16 16">
                      <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                    </svg>
                  </span>  
                  银联支付
                </div>
                <div class="price d-none">
                  <div>应付金额<span id="pay-price">${order.final_price}</span>元</div>
                </div>
              </li> 
             
            </ul>
          </div>
          <div class="d-flex justify-content-end paynow">
            <a class="btn btn-info" onclick="payorder()">立即支付</a>
          </div>
        </div>

      </div>

      <div class="col-1"></div>
    </div>
  </main>

</body>
</html>